<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP and HTML Example</title>
</head>
<style>
    .emoji-gallery {
        width: 600px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
   .emoji-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            padding: 20px;
        }
        .emoji-item {
            width: 120px;
            text-align: center;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 8px;
            transition: transform 0.2s;
        }
        .emoji-item:hover {
            transform: scale(1.05);
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .emoji-img {
            width: 100px;
            height: 100px;
            object-fit: contain;
        }
        .emoji-title {
            margin-top: 5px;
            font-size: 14px;
        }
</style>
<body>
    <h1>表情包大全</h1>
    <div class="emoji-gallery">
        
    <?php
    //    用一个数组来存储表情包
    $emojis = [
        'file1' => './img/zuoye1/01.gif',
        'file2' => './img/zuoye1/02.gif',
        'file3' => './img/zuoye1/03.gif',
        'file4' => './img/zuoye1/04.gif',
        'file5' => './img/zuoye1/05.gif',
        'file6' => './img/zuoye1/06.gif',
        'file7' => './img/zuoye1/07.gif',
        'file8' => './img/zuoye1/08.gif',
        'file9' => './img/zuoye1/09.gif',
        'file10' => './img/zuoye1/10.gif',
        'file11' => './img/zuoye1/11.gif', 
        'file12' => './img/zuoye1/12.gif',
        'file13' => './img/zuoye1/13.gif',
        'file14' => './img/zuoye1/14.gif',
        'file15' => './img/zuoye1/15.gif',
        'file16' => './img/zuoye1/16.gif',
        'file17' => './img/zuoye1/17.gif',
        'file18' => './img/zuoye1/18.gif',
        'file19' => './img/zuoye1/19.gif',
        'file20' => './img/zuoye1/20.gif',
        'file21' => './img/zuoye1/21.gif',
        'file22' => './img/zuoye1/22.gif',
        'file23' => './img/zuoye1/23.gif',
        'file24' => './img/zuoye1/24.gif',
        'file25' => './img/zuoye1/25.gif',
        'file26' => './img/zuoye1/26.gif',
        'file27' => './img/zuoye1/27.gif',
        'file28' => './img/zuoye1/28.gif',
        'file29' => './img/zuoye1/29.gif',
        'file30' => './img/zuoye1/30.gif',
        'file31' => './img/zuoye1/31.gif',
        'file32' => './img/zuoye1/32.gif',
        'file33' => './img/zuoye1/33.gif',
        'file34' => './img/zuoye1/34.gif',
        'file35' => './img/zuoye1/35.gif',
        'file36' => './img/zuoye1/36.gif',
        'file37' => './img/zuoye1/37.gif',
        'file38' => './img/zuoye1/38.gif',
        'file39' => './img/zuoye1/39.gif',
        'file40' => './img/zuoye1/40.gif',
        'file41' => './img/zuoye1/41.gif',
        'file42' => './img/zuoye1/42.gif',
        'file43' => './img/zuoye1/43.gif',
        'file44' => './img/zuoye1/44.gif',
        'file45' => './img/zuoye1/45.gif',
        'file46' => './img/zuoye1/46.gif',
        'file47' => './img/zuoye1/47.gif',
        'file48' => './img/zuoye1/48.gif',
        'file49' => './img/zuoye1/49.gif',
        'file50' => './img/zuoye1/50.gif',
        'file51' => './img/zuoye1/51.gif',
        'file52' => './img/zuoye1/52.gif',
        'file53' => './img/zuoye1/53.gif',
        'file54' => './img/zuoye1/54.gif',
        'file55' => './img/zuoye1/55.gif',
        'file56' => './img/zuoye1/56.gif',
        'file57' => './img/zuoye1/57.gif',
        'file58' => './img/zuoye1/58.gif',
        'file59' => './img/zuoye1/59.gif',
        'file60' => './img/zuoye1/60.gif',
        'file61' => './img/zuoye1/61.gif',
        'file62' => './img/zuoye1/62.gif'
    ];

    // 使用foreach循环遍历数组并输出表情包
    for ($i = 1; $i < count($emojis); $i++) {
        echo '<div class="emoji-item">';
        // 使用字符串拼接来获取数组中的每个表情包
        echo "<img src='{$emojis['file' . $i]}' alt='表情包' style='width: 100px; height: 100px; margin: 5px;'>";
        echo '</div>';
    }
    ?>
    </div>
</body>
</html>